<script setup lang="ts">
import { APP_TITLE } from '../../utils';

const cls = 'ui-layout-entry'
</script>

<template>
  <div :class="cls">
    <ElCard :class="`${cls}_box`" shadow="never">
      <h3 :class="`${cls}_title`">{{ APP_TITLE }}</h3>
      <RouterView />
    </ElCard>
  </div>
</template>

<style lang="scss">
.ui-layout-entry {
  min-height: 100vh;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-color-dark);
  &_box {
    width: 100%;
    max-width: 420px;
  }
  &_title {
    margin-bottom: 20px;
    font-size: 20px;
    text-align: center;
  }
}
</style>
